<template>
  <a-modal
    :key="rendomKey"
    v-model:visible="visible"
    :title="title"
    width="800px"
    :confirm-loading="loading"
    :mask-closable="false"
    :keyboard="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-card>
      <a-form :model="form" :label-width="100" layout="vertical">
        <a-form-item :label="label" :rules="[{ required: true }]">
          <a-textarea
            v-model:value="form.reason"
            show-count
            :maxlength="1000"
            type="textarea"
            :role="[{ require: true, message: `请输入${label}`, trigger: 'blur' }]"
            placeholder="请输入"
          />
        </a-form-item>
      </a-form>
    </a-card>
  </a-modal>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { ref } from 'vue'

const props = defineProps<{
  label: string
  title: string
}>()

const visible = ref(false)
const form = ref({
  reason: ''
})

let checkedData = null
const rendomKey = ref()
const show = (row) => {
  visible.value = true
  checkedData = row || null
  rendomKey.value = Math.random()
  form.value = {
    reason: ''
  }
}

const emtis = defineEmits(['ok'])
const loading = ref(false)
const handleOk = () => {
  if (!form.value.reason.trim()) {
    message.error('请输入' + props.label)
    return
  }
  loading.value = true
  // checkedData 是主动传入的数据，用户表格操作记录选中的行
  emtis('ok', { row: checkedData, reason: form.value.reason.trim() })
}

const handleCancel = () => {
  visible.value = false
  loading.value = false
}

defineExpose({
  show,
  loading,
  visible
})
</script>
